<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的书架</title>
    <!-- 图标组件库 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3701801_12u2357o4ba.css">
    <link rel="stylesheet" th:href="@{/css/sidebar.css}">
    <link rel="stylesheet" th:href="@{/css/topBar.css}">
    <link rel="stylesheet" th:href="@{/css/myBook.css}">
    <script>
        window.onload = ()=>{
            var cz = document.getElementById("cz");

            var msg = cz.getAttribute("msg")
            var msg1 = cz.getAttribute("msg1");
            var msg2 = cz.getAttribute("msg2");

            if(msg!=null){
                if(msg=="true"){
                    alert("已发送借阅请求！");
                }
                if (msg=="false"){
                    alert("请先登录！");
                }
            }
            if(msg1!=null){
                if(msg1=="true"){
                    alert("已发送借阅请求！");
                }
                if (msg1=="false"){
                    alert("借阅的同本图书不得超过十本！！");
                }
            }

            if(msg2!=null){
                if(msg2=="true"){
                    alert("删除成功！！");
                }
                if (msg2=="false"){
                    alert("您已借阅该书，不能移出书架！！");
                }
            }

            /*var myBookMsg =  document.getElementById("myBookMsg");
            var hasUser = myBookMsg.getAttribute("user");
            if(hasUser!=null){
                if(hasUser=="true"){
                    if(confirm("您还未登录，是否前往登录！")){
                        location.href = (`http://localhost:8080/library/login`);
                    }
                }
                if (hasUser=="false"){
                    alert("请先登录！");
                }
            }*/
        }


    </script>
</head>
<body>




<nav class="sidebar close">
    <header>
        <div class="user-info">
                <span class="image">
                    <img th:src="@{/img/tx.JPG}" alt="">
                </span>
            <div class="text nickname">
                <span class="name">[[${session.name}]]</span>
                <span class="identity" th:text="${session.identity}">普通用户</span>
            </div>
        </div>

        <i class="toggle iconfont icon-xiangyou1"></i>
    </header>

    <div class="menu-bar">
        <div class="menu">
            <li class="search-box">
                <i class="iconfont icon-sousuo icon"></i>
                <input type="text" placeholder="搜你想要">
            </li>
            <ul class="menu-links">
                <li class="nav-link">
                    <a th:href="@{/}">
                        <i class="iconfont icon-home icon"></i>
                        <span class="text nav-text">回到主页</span>
                    </a>
                </li>
                <li class="nav-link">
                    <a th:href="@{/user/self}">
                        <i class="iconfont icon-yonghuguanli icon"></i>
                        <span class="text nav-text">个人信息</span>
                    </a>
                </li>
                <li class="nav-link">
                    <a th:href="@{/user/myBook}">
                        <i class="icon iconfont icon-tubiaozhizuomoban-37"></i>
                        <span class="text nav-text">我的书架</span>
                    </a>
                </li>

                <li class="nav-link">
                    <a th:href="@{/user/problem}">
                        <i class="icon iconfont icon-guizeguanli"></i>
                        <span class="text nav-text">问题反馈</span>
                    </a>
                </li>

                <li class="nav-link">
                    <a href="#">
                        <i class=" icon iconfont icon-aixin1"></i>
                        <span class="text nav-text">特别关心</span>
                    </a>
                </li>
                <li class="nav-link">
                    <a  th:href="@{/music}">
                        <i class="icon iconfont icon-yinle"></i>
                        <span class="text nav-text">音乐</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="bottom-content">
            <li>
                <a th:href="@{/logout}">
                    <i class="icon iconfont icon-tuichu"></i>
                    <span class="text nav-text">退出登录</span>
                </a>
            </li>
            <li class="mode">
                <div class="sun-moon">
                    <i class="icon iconfont icon-a-icon_wananyueliangshuimian moon"></i>
                    <i class="icon iconfont icon-taiyang-copy sun"></i>
                </div>
                <span class="mode-text text">夜间模式</span>
                <div class="toggle-switch">
                    <span class="switch"></span>
                </div>
            </li>
        </div>
    </div>
</nav>

    <section class="home">
        <!-- 顶部导航条 -->
       <!-- 顶部导航条外层容器 -->
        <div class="topbar-wrapper ">
            <div class="topbar">

                <ul class="left-nav">
                    <li ><a href="#" class="acolor">三味书城</a></li>
                    <li class="team-wrapper">
                        <a href="#"   class="acolor">
                            团队信息
                            <div class="team">
                                <div class="cube">
                                    <!-- 引入图片 -->
                                    <div class="box1">
                                        <img th:src="@{/img/team/lxg.jpg}">
                                    </div>

                                    <div class="box2">
                                        <img th:src="@{/img/team/lx.jpg}">
                                    </div>

                                    <div class="box3">
                                        <img th:src="@{/img/team/xsn.jpg}">
                                    </div>

                                    <div class="box4">
                                        <img th:src="@{/img/team/yzz.jpg}">
                                    </div>

                                    <div class="box5">
                                        <img th:src="@{/img/team/zj.jpg}">
                                    </div>

                                    <div class="box6">
                                        <img th:src="@{/img/team/zk.jpg}">
                                    </div>
                                </div>
                                <!-- 团队简介 -->
                                <div class="team-info">
                                    <div class="outer">
                                        <!-- 创建图片容器 -->
                                        <div class="img-wrapper">
                                            <img th:src="@{/img/team/lxg.jpg}" alt="">
                                        </div>
                                        <!-- 创建内容区容器 -->
                                        <div class="info">
                                            <h2 class="title">
                                                林徐耿
                                            </h2>
                                            <h3 class="category">
                                                <i class="iconfont icon-renyuanjieshao"></i>
                                                简介
                                            </h3>
                                            <p class="intro">
                                                20软件工程二班
                                            </p>
                                        </div>
                                    </div>
                                    <div class="outer">
                                        <!-- 创建图片容器 -->
                                        <div class="img-wrapper">
                                            <img th:src="@{/img/team/yzz.jpg}" alt="">
                                        </div>
                                        <!-- 创建内容区容器 -->
                                        <div class="info">
                                            <h2 class="title">
                                                余子中
                                            </h2>
                                            <h3 class="category">
                                                <i class="iconfont icon-renyuanjieshao"></i>
                                                简介
                                            </h3>
                                            <p class="intro">
                                                20软件工程二班
                                            </p>
                                        </div>
                                    </div>
                                    <div class="outer">
                                        <!-- 创建图片容器 -->
                                        <div class="img-wrapper">
                                            <img th:src="@{/img/team/xsn.jpg}" alt="">
                                        </div>
                                        <!-- 创建内容区容器 -->
                                        <div class="info">
                                            <h2 class="title">
                                                薛思暖
                                            </h2>
                                            <h3 class="category">
                                                <i class="iconfont icon-renyuanjieshao"></i>
                                                简介
                                            </h3>
                                            <p class="intro">
                                                20软件工程二班
                                            </p>
                                        </div>
                                    </div>
                                    <div class="outer">
                                        <!-- 创建图片容器 -->
                                        <div class="img-wrapper">
                                            <img th:src="@{/img/team/lx.jpg}" alt="">
                                        </div>
                                        <!-- 创建内容区容器 -->
                                        <div class="info">
                                            <h2 class="title">
                                                刘翔
                                            </h2>
                                            <h3 class="category">
                                                <i class="iconfont icon-renyuanjieshao"></i>
                                                简介
                                            </h3>
                                            <p class="intro">
                                                20软件工程二班
                                            </p>
                                        </div>
                                    </div>
                                    <div class="outer">
                                        <!-- 创建图片容器 -->
                                        <div class="img-wrapper">
                                            <img th:src="@{/img/team/zk.jpg}" alt="">
                                        </div>
                                        <!-- 创建内容区容器 -->
                                        <div class="info">
                                            <h2 class="title">
                                                钟楷
                                            </h2>
                                            <h3 class="category">
                                                <i class="iconfont icon-renyuanjieshao"></i>
                                                简介
                                            </h3>
                                            <p class="intro">
                                                20软件工程二班
                                            </p>
                                        </div>
                                    </div>
                                    <div class="outer">
                                        <!-- 创建图片容器 -->
                                        <div class="img-wrapper">
                                            <img th:src="@{/img/team/zj.jpg}" alt="">
                                        </div>
                                        <!-- 创建内容区容器 -->
                                        <div class="info">
                                            <h2 class="title">
                                                张楗
                                            </h2>
                                            <h3 class="category">
                                                <i class="iconfont icon-renyuanjieshao"></i>
                                                简介
                                            </h3>
                                            <p class="intro">
                                                20软件工程二班
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li><a href="#"   class="acolor">操作规则</a></li>
                    <li>
                        <a class="app acolor" href="#">联系客服
                            <!-- 添加一个弹出层 -->
                            <div class="qrcode">
                                <img th:src="@{/img/kefu.jpg}" alt="">
                                <span>添加微信</span>
                            </div>
                        </a>
                    </li>
                    <li><a th:href="@{/user/self}"  class="acolor">个人中心</a></li>
                </ul>

                <div class="right-nav">



                    <!--如果未登录显示-->

                    <ul class="login-nav" th:if="${session.user}==null">
                        <li><a th:href="@{/login}" class="acolor">登录</a></li>
                        <li><a th:href="@{/regist}" class="acolor">注册</a></li>
                    </ul>

                    <!--如果已经登录显示欢迎信息-->
                    <ul class="login-nav" th:if="${session.user}!=null">
                        <li>欢迎使用</li>
                    </ul>

                    <ul class="bookshelf">
                        <li>
                            <a class="cart acolor" href="javascript:;">
                                <i class="iconfont icon-bookshelf"></i>
                                书架([[${session.myBooksSize}]])
                                <!-- 添加一个弹出层如果没书显示这个 -->
                                <div class="cart-msg" th:if="${session.isEmpty}">
                                    <span>书架中还没有书籍,请慢慢挑选吧！</span>
                                </div>
                                <!-- 如果有书，显示以下 -->
                                <!-- 部分书籍显示，以及一个进入书架的链接 -->
                                <div class="cart-msg2" th:if="${session.noEmpty}">
                                    <a th:href="@{/user/myBook}">点击前往书架！</a>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>




            </div>
        </div>


      <div class="mybooks">
            <h2 id="myBookMsg" th:userMsg="${noUser}">书架信息</h2>
            <div class="mybookList">
                <table>
                    <tr>
                        <th>图书id</th>
                        <th>图书名</th>
                        <th>作者名</th>
                        <th>借阅数量</th>
                        <th>图书状态</td>
                        <th colspan="2" th:msg="${borrowResult}" th:msg1="${maxResult}" th:msg2="${deleteResult}" id="cz">操作</th>
                    </tr>
                    <tr th:each="borrow:${pageInfo.list}">
                        <td>[[${borrow.bid}]]</td>
                        <td>[[${borrow.bookname}]]</td>
                        <td>[[${borrow.author}]]</td>
                        <td>[[${borrow.num}]]</td>
                        <td>[[${borrow.status==0 ? "未借阅":"已借阅"}]]</td>
                        <td><a id="deleteMyBook"  class="deleteMyBook" th:bid="${borrow.bid}" th:uid="${session?.user?.uid}">删除</a></td>
                        <td class="borrowTd" ><a class="borrow" id="borrow" th:bid="${borrow.bid}" th:uid="${session?.user?.uid}">借阅</a></td>
                    </tr>
                </table>
            </div>
            <!-- 分页条导航条 -->
            <div class="page-nav-wrapper">
                <nav class="page-nav">
                    <!-- 页面信息 -->
                    <div class="page-info">
                        <span class="now-page">当前为第[[${pageInfo.pageNum}]]页</span>
                        <span class="page-number">共 [[${pageInfo.pages}]] 页</span>
                    </div>
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" th:href="@{/user/myBook(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">Previous</a></li>
                        <li th:each="nav:${pageInfo.navigatepageNums}" class="page-item">
                            <a th:href="'/library/user/myBook?pageNum='+${nav}" th:text="${nav}" class="page-link"></a>
                        </li>
                        <li class="page-item"><a class="page-link" th:href="@{/user/myBook(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">Next</a></li>
                    </ul>
                </nav>
            </div>
      </div>
       

      

   </section>

<script th:src="@{/script/script.js}"></script>
<script>
    var deleteBtn = document.getElementsByClassName("deleteMyBook");
    for (let i = 0; i < deleteBtn.length;i++){
        deleteBtn[i].addEventListener("click",()=>{
            let bid =  deleteBtn[i].getAttribute("bid");
            let uid = deleteBtn[i].getAttribute("uid");
            if(uid == null){
                uid="";
            }

            if(confirm(`你确定要将id为${bid}的图书移出书架吗？`)){
                location.href=(`http://localhost:8080/library/user/deleteMyBook?bid=${bid}&uid=${uid}`);
            }
            return false;
        });
    }


    var borrowBtn = document.getElementsByClassName("borrow");
    for (let i = 0; i < borrowBtn.length;i++){
        borrowBtn[i].addEventListener("click",()=>{
            var day = prompt("请输入你要借阅的天数");
            if(day == null){
                return false;
            }else{
                const isInteger = Number.isInteger(parseInt(day));
                if(isInteger && parseInt(day) <= 30){
                    let bid = borrowBtn[i].getAttribute("bid");
                    let uid = borrowBtn[i].getAttribute("uid");
                    if(uid == null){
                        uid="";
                    }
                    location.href=(`http://localhost:8080/library/user/borrowBook?bid=${bid}&uid=${uid}&days=${day}`);
                }else {
                    alert("请输入小于等于30的整数");
                }
                return false;
            }



        });

    }

</script>

</body>
</html>